<template>
    <div>
        <!-- 顶部导航栏 -->
        <NavTop class="navtop-msg-detail">
            <div class="message-details-top">
                <van-icon name="arrow-left" @click="backBtn" size="20" class="back-btn"/>
                <span>{{ name }}</span>
                <van-icon name="ellipsis" class="more-btn" @click="handleGoHome"/>
            </div>
        </NavTop>
        <MsgContent :dataList="messageList" :isDisabled="isDisabled"/>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop'
import MsgContent from '@/components/MsgContent'
import { reqGetFriendInfo, reqGetGroupInfo, reqSetMessageRead } from '@/api'
import { Toast } from 'vant'
import { mapState } from 'vuex'
import { formatDate } from '@/utils'
export default {
    components: {
        NavTop,
        MsgContent
    },
    data() {
        return {
            messageList: [], // 当前聊天好友、群聊信息
            name: '', // 名字
            pageSize: 20, // 每页显示的记录数
            pageNum: 1, // 当前消息分页数
            isDisabled: false,  // 是否禁用下拉刷新
        }
    },
    computed: {
        ...mapState({
            userId: state => state.login.userInfo._id
        })
    },
    methods: {
        backBtn() {
            this.$router.push('/message')
        },
        // 获取好友信息
        async getFriendInfo(pageNum = 1) {
            let friendId = this.$route.query._id
            let res = await reqGetFriendInfo({userId: this.userId, friendId, pageNum})
            if(res.status === 200) {
                res.data.messageList.forEach(i => {
                    i.time = formatDate(i.time)
                })
                if (res.data.messageList.length < 10) {
                    // 聊天记录数量小于10，不允许下拉刷新
                    this.isDisabled = true
                }
                this.messageList = [ ...res.data.messageList, ...this.messageList]
                this.name = res.data.friendNick.nick
            } else if (res.status === 201) {
                this.name = res.data.nick
                // 暂无更多，不允许下拉加载更多了
                this.isDisabled = true
            } else if (res.status === 202) {
                // 不是好友
                this.name = res.data.nick
                Toast.fail(res.msg)
            } else {
                Toast.fail(res.msg)
            }
        },
        // 获取群聊信息
        async getGroupInfo(pageNum = 1) {
            let groupId = this.$route.query._id
            let res = await reqGetGroupInfo({userId: this.userId, groupId, pageNum})
            if(res.status === 200) {
                res.data.messageList.forEach(i => {
                    i.time = formatDate(i.time)
                })
                if (res.data.messageList.length < 10) {
                    // 聊天记录数量小于10，不允许下拉刷新
                    this.isDisabled = true
                }
                this.messageList = [ ...res.data.messageList, ...this.messageList]
                this.name = res.data.groupNick.groupName
            } else if (res.status === 201) {
                this.name = res.data.groupName
                // 暂无更多，不允许下拉加载更多了
                this.isDisabled = true
            } else if (res.status === 202) {
                // 不在群内
                this.name = res.data.groupName
                Toast.fail(res.msg)
            } else {
                Toast.fail(res.msg)
            }
        },
        // 去好友/群主页
        handleGoHome() {
            const { type } = this.$route.params
            if (type === 'friendChat') {
                this.$router.push({
                    path: '/userhome', 
                    query: {
                        _id: this.$route.query._id
                    }
                })
            } else {
                this.$router.push({
                    path: '/grouphome', 
                    query: {
                        _id: this.$route.query._id
                    }
                })
            }
        },
        // 将好友消息设置为已读
        async setMessageRead() {
            let ids = {userId: this.userId, friendId: this.$route.query._id}
            await reqSetMessageRead(ids)
        }
    },
    mounted() {
        const { type } = this.$route.params
        if (type === 'friendChat') {
            // 获取聊天记录
            this.getFriendInfo()
            // 将聊天记录状态改为已读
            this.setMessageRead()
        } else {
            // 群聊
            this.getGroupInfo()
            // 将进入群聊的人加入房间
            this.$socket.emit('join_group', this.$route.query._id)  // groupId
        }
    },
    sockets: {
        unread_message(id) {
            // 判断该聊天详情页的好友是否为发送消息的好友，是就设置为已读
            if (this.$route.params.type === 'friendChat' && this.$route.query._id === id) {
                this.setMessageRead()
            }
        }
    }
}
</script>

<style lang="less" scoped>
.back-btn {
    position: fixed;
    left: .4rem;
    top: .4rem;
    font-size: .5333rem;
    color: #fff;
    font-weight: 600;
}
.navtop-msg-detail {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.message-details-top {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.4667rem;
    padding: 0 .3333rem;
    box-sizing: border-box;
    color: #fff;
    background-color: #69c4f6;
    img {
        width: .6667rem;
        height: .6667rem;
    }
}
.more-btn {
    position: fixed;
    right: .4rem;
    top: .4rem;
    font-size: .6rem;
    color: #fff;
    font-weight: 600;
} 
</style>